import {messages} from "share/common";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
// import shapes from '../../common/shapes';
// import arrowUtil from '../../common/arrowUtil'
import { Button, Icon, Row, Col } from 'antd'
const ButtonGroup = Button.Group;
import FlowContainer from './flow-container'
import 'styles/components/simple-flow/navigation.scss'
class Navigation extends Component {
  constructor(args) {
    super(args);
    this.state = {
      navigation: {},
      canvasOption: {},
      scale: 1,
      showWindowNav: true,
    };
    this.chartDom = null;
    this.dom = null;
    this.navigation = null;
    this.navigationPoint = null;
    this.startScroll = {};
  }

  handleScroll = e => {
    this.setNavigationByScroll(e.target.scrollLeft, e.target.scrollTop);
  };

  componentDidMount() {
    this.navigation = document.getElementById('navigation');
    this.chartDom = document.getElementById('flowOverflow');
    this.dom = document.getElementById('navigation-layout');
    // this.paint(this.props);
    this.setNavigationByScroll(this.chartDom.scrollLeft, this.chartDom.scrollTop);
    this.chartDom.addEventListener('scroll', this.handleScroll)
  }

  componentWillUnmount() {
    this.chartDom.removeEventListener('scroll', this.handleScroll)
  }

  componentWillReceiveProps(nextProps) {
    this.chartDom = document.getElementById('flowOverflow');
    let { scrollWidth, scrollHeight } = this.chartDom;
    let canvasOption = {
      width: (scrollWidth / (scrollHeight + scrollWidth)) * 200,
      height: ((scrollHeight ) / (scrollWidth + scrollHeight)) * 200 + 70,
    };
    this.setState({ canvasOption });
  }


  getScaleNumber = (number, isX) => {
    let flowOverflow = document.getElementById('flowOverflow');
    let page = {
      width: flowOverflow.scrollWidth,
      height: flowOverflow.scrollHeight
    };
    number -= 0;
    let target = isX ? page.width : page.height;
    //200是导航窗口的大小
    let percent = 200 / target;
    if (number < 0)
      return 0;
    if (number > target)
      return target * percent;
    else
      return number * percent;
  };

  setNavigationByScroll = (scrollLeft, scrollTop) => {
    let left = this.getScaleNumber(scrollLeft, true);
    let top = this.getScaleNumber(scrollTop);
    let container = document.getElementById('flow-container');
    let right = this.getScaleNumber(scrollLeft + container.clientWidth - 162, true);
    let bottom = this.getScaleNumber(scrollTop + container.clientHeight);
    let navigation = {
      left, top,
      width: right - left, height: bottom - top
    };
    navigation.top += 20;
    this.setState({ navigation });
  };

  getNavigationPoint = e => {
    const rect = document.getElementById('navigation-layout').getBoundingClientRect();
    return {
      left: e.clientX - rect.left,
      top: e.clientY - rect.top
    };
  };

  handleMouseDownEye = e => {
    e.stopPropagation();
    this.navigationPoint = this.getNavigationPoint(e);
    this.startScroll = { left: this.chartDom.scrollLeft, top: this.chartDom.scrollTop };
  };

  handleMouseMoveEye = e => {
    if (this.navigationPoint) {
      let flowOverflow = document.getElementById('flowOverflow');
      let page = {
        width: flowOverflow.scrollWidth,
        height: flowOverflow.scrollHeight
      };
      let nowPoint = this.getNavigationPoint(e);
      let offsetLeft = nowPoint.left - this.navigationPoint.left;
      let offsetTop = nowPoint.top - this.navigationPoint.top;
      let scaleX = page.width / 200;
      let scaleY = page.height / 200;
      let scrollLeft = this.startScroll.left + offsetLeft * scaleX;
      let scrollTop = this.startScroll.top + offsetTop * scaleY;
      // console.log(scrollLeft, scrollTop)
      this.chartDom.scrollTo(scrollLeft, scrollTop);
      this.setNavigationByScroll(scrollLeft, scrollTop);
    }
  };

  stopNavigation = () => {
    this.navigationPoint = null;
  };

  handleClickCanvas = e => {
    let point = this.getNavigationPoint(e);
    point.top -= 20;
    let flowOverflow = document.getElementById('flowOverflow');
    let page = {
      width: flowOverflow.scrollWidth,
      height: flowOverflow.scrollHeight
    };
    let container = document.getElementById('flow-container');
    let scrollLeft = point.left * page.width / 200 - (container.clientWidth - 162) / 2;
    let scrollTop = point.top * page.height / 200 - (container.clientHeight / 2);
    this.chartDom.scrollTo(scrollLeft, scrollTop);
    // container.scrollTop(scrollTop);
    this.setNavigationByScroll(scrollLeft, scrollTop)
  };


  handleScale = type => {
    let { scale } = this.state;
    if (type === 'less') {
      scale = scale - 0.25;
    } else {
      scale = scale + 0.25;
    }
    this.props.onChangeScale(scale);
    this.setState({
      scale
    });
  };

  handleChange = () => {
    let { showWindowNav } = this.state;
    this.setState({ showWindowNav: !showWindowNav })
  }

  render() {
    const { navigation, scale, showWindowNav } = this.state;
    return (
      <div id="navigation">
        {showWindowNav ?
          <div className="dock-view">
            <div className="navigation"
                 onMouseUp={this.stopNavigation} id="navigation-layout">
              <div className="title" onClick={this.handleChange}>{messages('common-1.key155')/*导航*/} <Icon className="pick-up" type="step-forward"/>
              </div>
              <div style={{ width: 200, height: 200 }} onClick={this.handleClickCanvas}>
                <canvas onMouseDown={e => e.preventDefault()} width={200} height={200}/>
              </div>
              <div style={navigation}
                   onMouseDown={this.handleMouseDownEye}
                   onMouseMove={this.handleMouseMoveEye}
                   onMouseLeave={this.stopNavigation}
                   className="navigation-eyes"/>
            </div>
            <Row type="flex" align="middle" className="scale-btn">
              <Col span={5}>{messages('common-1.key156')/*缩放*/}</Col>
              <Col>
                <ButtonGroup size="small">
                  <Button disabled={scale === 0.25} onClick={() => this.handleScale('less')}>
                    <Icon type="minus"/>
                  </Button>
                  <Button disabled>{scale * 100}%</Button>
                  <Button disabled={scale === 1.5} onClick={() => this.handleScale('more')}>
                    <Icon type="plus"/>
                  </Button>
                </ButtonGroup>
              </Col>
            </Row>
          </div>
          :
          <div className="dock-btn">
            <Icon type="step-backward" onClick={this.handleChange}/>
          </div>
        }
      </div>
    );
  }
}

Navigation.propTypes = {
  onMouseMove: React.PropTypes.func,//鼠标在条件 审批 知会节点的移动事件
  scale: React.PropTypes.number,
  page: PropTypes.object
};

export default Navigation;
